<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>

    <%@include file="common/head.jsp" %>

</head>

<body>

<!-- Top menu -->
<%@include file="common/header.jsp" %>

<!-- Page Title -->
<div class="page-title-container">
    <div class="container">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1 page-title wow fadeIn">
                <span aria-hidden="true" class="${articleCategory.articleCategoryIcon}"></span>
                <h1>${articleCategory.articleCategoryTitle}</h1>
            </div>
        </div>
    </div>
</div>

<!-- Services Full Width Text -->
<div class="services-full-width-container">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 portfolio-filters wow fadeInLeft">
                <a href="/index" class="filter-all">首页</a> /
                <a href="/articleCategoryFirst?articleCategoryId=${articleCategoryFather.articleCategoryId}" class="filter-web-design">${articleCategoryFather.articleCategoryTitle}</a> /
                <a href="javascript:void(0)" onclick="location.reload()" class="filter-web-design  active">${articleCategory.articleCategoryTitle}</a>
            </div>
        </div>
    </div>
</div>

<!-- Services -->
<div class="services-container">
    <div class="container">
        <div class="row">
            <c:choose>
                <c:when test="${empty articleList}">
                    <h4 class="text-center">暂时没有数据哦 <a href="/index"><span class="colored-text">首页</span></a></h4>
                </c:when>
                <c:otherwise>
                    <c:forEach items="${articleList}"  var="article">
                        <div class="col-sm-3">
                            <div class="service wow fadeInUp">
                                <div class="service-icon"><span aria-hidden="true" class="${article.articleIcon}"></span></div>
                                <h3>${article.articleTitle}</h3>
                                <%--<p>${fn:substring(article.articleContent, 0, 50)}...</p>--%>
                                <a class="big-link-1" href="/articleDetail?articleId=${article.articleId}">Read more</a>
                            </div>
                        </div>
                    </c:forEach>
                </c:otherwise>
            </c:choose>
        </div>
    </div>
</div>

<!-- Footer -->
<%@include file="common/footer.jsp" %>

<!-- Javascript -->
<%@include file="common/scripts.jsp" %>

</body>

</html>